Disclaimer

The mentioned functionalities may be restricted depending on the purchased software license.

Gestión de Plantillas de Pantalla Pública

Las plantillas de pantalla pública son la base de tus visualizaciones personalizadas. Definen el diseño, la estructura y los elementos visuales que se aplicarán a tus instalaciones. Esta guía completa cubre todo, desde la creación de plantillas básicas hasta técnicas de diseño avanzadas.

📋 Resumen

¿Qué son las Plantillas de Pantalla Pública?

Las plantillas sirven como planos reutilizables que:

📐 Definen diseños visuales para tus pantallas públicas
🧩 Organizan bloques de contenido y su posicionamiento
🎨 Establecen consistencia de diseño en múltiples instalaciones
⚙️ Permiten un despliegue rápido de visualizaciones estandarizadas
🔄 Soportan actualizaciones fáciles en todas las configuraciones vinculadas

Beneficios Clave

Beneficio	Descripción
🚀 Eficiencia	Crear una vez, usar en múltiples instalaciones
🎯 Consistencia	Mantener estándares de diseño uniformes
🔧 Flexibilidad	Modificación fácil sin recrear desde cero

🚀 Comenzando

Flujo de Trabajo de Plantillas

📐 Diseñar el Diseño - Planifica tu estructura visual
🎨 Crear Plantilla - Construir usando el editor de plantillas
💾 Guardar Plantilla - Almacenar para reutilización en diversas instalaciones

Requisitos Previos

Antes de crear plantillas, asegúrate de tener:

✅ Cuenta de SmartgridX con permisos apropiados
✅ Objetivos de diseño claros para tu visualización
✅ Requisitos de contenido (imágenes, puntos de datos, diseños)

🎛️ Interfaz de Gestión de Plantillas

Accediendo al Gestor de Plantillas

Pasos de navegación:

Inicia sesión en tu cuenta de SmartgridX
Navega a 'Pantallas públicas' en la barra lateral principal
Haz clic en el botón 'Plantilla de Pantalla Pública' en la página de resumen

Esto abre la interfaz de gestión de plantillas donde puedes ver, crear, editar y eliminar plantillas.

Tabla de Resumen de Plantillas

Acciones disponibles:

➕ Agregar - Botón verde para iniciar la creación de plantilla
✏️ Editar - Modificar el diseño de la plantilla existente
🗑️ Eliminar - Quitar la plantilla no utilizada

🎨 Proceso de Creación de Plantillas

Iniciando una Nueva Plantilla

Haz clic en el botón "Crear Nueva Plantilla" para abrir la interfaz del editor de plantillas.

Configuración del Encabezado de la Plantilla

Configuración del Título

Título de la Plantilla:

Propósito: Identifica la plantilla en listas y configuraciones
Mejores prácticas: Usa nombres descriptivos, específicos del proyecto
Ejemplos: "Tablero-KPI-Fábrica", "Diseño-Monitoreo-Energía", "Pantalla-Multi-Zona"

Configuración de Márgenes

La configuración de márgenes define el área segura desde los bordes de la pantalla:

Control deslizante de márgenes (0-100px):

📐 Rango: 0 a 100 píxeles desde el borde de la pantalla
🎯 Propósito: Crea un espaciado seguro para evitar el corte de contenido
📱 Aplicación: Asegura visibilidad en varios tipos de pantallas
⚙️ Recomendación: Usa 10-20px para pantallas estándar, 30-50px para pantallas de borde a borde

Impacto visual:

0px de margen - El contenido se extiende hasta los bordes de la pantalla
50px de margen - El contenido comienza a 50 píxeles de todos los bordes
100px de margen - Área máxima segura con un espaciado considerable

Funcionalidad de Guardado

El 💾 botón de Guardar (esquina superior derecha) te permite guardar tu plantilla actual.

🧩 Sistema de Diseño de Bloques

Comprendiendo el Sistema de Cuadrícula

Fundamentos de la Cuadrícula

El editor de plantillas utiliza un sistema de cuadrícula basado en porcentaje de 100×100:

Propiedades de la Cuadrícula:

📐 Dimensiones: 100 unidades de ancho × 100 unidades de alto
📊 Unidades: Valores de porcentaje (1 unidad = 1% de la dimensión total)
🎯 Precisión: Permite el posicionamiento y tamaño exactos
📱 Responsable: Se adapta automáticamente a diferentes tamaños de pantalla

Ejemplos de Diseño de Bloques

🖼️ Bloque Único
📊 Lado a Lado
📚 Diseño Apilado
🔲 Diseño Cuadrante

Configuración: 100 ancho × 100 alto
Resultado: Cobertura de pantalla completa
Caso de uso: Visualización única grande, imagen de pantalla completa

┌─────────────────────────────────┐
│                                 │
│         BLOQUE COMPLETO         │
│                                 │
│                                 │
└─────────────────────────────────┘

Configuración: Dos bloques de 50 ancho × 100 alto
Resultado: Diseño de pantalla dividida
Caso de uso: Vistas de comparación, visualizaciones de datos duales

┌─────────────────┬───────────────┐
│                 │               │
│    BLOQUE 1     │   BLOQUE 2    │
│                 │               │
│                 │               │
└─────────────────┴───────────────┘

Configuración: Dos bloques de 100 ancho × 50 alto
Resultado: Apilamiento vertical
Caso de uso: Diseño de encabezado/contenido, título/detalles

┌─────────────────────────────────┐
│            BLOQUE 1             │
│                                 │
├─────────────────────────────────┤
│            BLOQUE 2             │
│                                 │
└─────────────────────────────────┘

Configuración: Cuatro bloques de 50 ancho × 50 alto
Resultado: Diseño de cuadrantes
Caso de uso: Tableros multi-métricos, cuadrículas de comparación

┌─────────────────┬───────────────┐
│    BLOQUE 1     │   BLOQUE 2    │
│                 │               │
├─────────────────┼───────────────┤
│    BLOQUE 3     │   BLOQUE 4    │
│                 │               │
└─────────────────┴───────────────┘

Manipulación de Bloques

Agregando Bloques

Método: Haz clic en el botón "Agregar Bloque" (esquina superior derecha del editor)
Resultado: Aparece un nuevo bloque con dimensiones predeterminadas
Próximos pasos: Posicionar y redimensionar según sea necesario

Posicionando Bloques

Arrastrar y Soltar:

🖱️ Haz clic y mantén presionado cualquier bloque para moverlo
📍 Vista previa en tiempo real muestra la posición mientras se arrastra
🧲 Alineación con cuadrícula ayuda con la alineación precisa
👁️ Guías visuales aparecen para ayudar con la alineación

Redimensionando Bloques

Mango de Redimensionamiento:

📐 Esquina inferior derecha muestra el mango de redimensionamiento cuando el bloque está seleccionado
🔧 Arrastra para redimensionar tanto el ancho como la altura simultáneamente
📊 Valores en tiempo real muestran las dimensiones actuales

Controles de Precisión

Panel de Posición del Lado Derecho

Cuando un bloque está seleccionado, el panel derecho proporciona:

Controles de Posición:

📍 Posición X - Desplazamiento horizontal desde el borde izquierdo (0-100)
📍 Posición Y - Desplazamiento vertical desde el borde superior (0-100)
🎨 Índice Z - Orden de capa para bloques superpuestos
📏 Ancho - Porcentaje de ancho del bloque (1-100)
📏 Alto - Porcentaje de altura del bloque (1-100)

⚙️ Configuración del Bloque

Tipos y Propiedades de Bloques

Accediendo a la Configuración del Bloque

Método:

Selecciona un bloque en el lienzo del editor
El panel de configuración aparece en la parte inferior de la pantalla
El menú desplegable de tipos de bloque es la opción de configuración principal

Nota: No todos los bloques son actualmente configurables. Esto cambiará a medida que continúe el desarrollo. Se añadirán más tipos de bloque en futuras actualizaciones.

Tipos de Bloques Disponibles

🖼️ Bloque de Imagen
☀️ Visión general solar
📈 Bloque de Gráfico

Propósito: Mostrar imágenes estáticas, logotipos, fondos, GIFs
Opciones de configuración:

📁 Fuente de imagen - Subir o URL que se utilizará como predeterminado para este bloque. Puedes dejar esto vacío si deseas forzar que se seleccione una imagen en la configuración

Casos de uso:

Logotipos de empresas y branding
Imágenes de fondo
Fotos de equipos
GIFs

Ejemplos de Plantillas

Este ejemplo demuestra una plantilla bien estructurada con:

📊 Organización clara de bloques con etiquetas descriptivas
📐 Espaciado y alineación adecuados
🎯 Tipos de bloques funcionales para diferentes necesidades de contenido

Nomenclatura de bloques en este ejemplo:

Cada bloque muestra su propósito destinado
Etiquetado claro ayuda con la configuración
Organización lógica apoya el mantenimiento

📚 Documentación Relacionada

Próximos Pasos

Después de crear tu plantilla:

⚙️ Configurar Instalaciones - Aplicar plantillas a instalaciones específicas
🎛️ Vincular Controladores - Conectar a hardware de visualización
🚀 Guía de inicio - Visión general del flujo de trabajo completo

Temas Avanzados

🎨 Técnicas de Diseño Avanzadas
📊 Integración de Datos Personalizados
🔄 Actualizaciones Automáticas de Plantillas
👥 Colaboración en Plantillas Multusuario

💡 Resumen de Mejores Prácticas

Diseño de Plantillas

✅ Principios de diseño:

🎯 Mantenlo simple - Enfócate en la información esencial
📱 Diseña de manera receptiva - Prueba en diferentes tamaños de pantalla
🎨 Mantén la consistencia - Utiliza colores y diseños estandarizados